<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>摄影师招募</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 80px;
				    max-width: 110px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					    width: 75%;					
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;					
							}
					/* 公共部分end */
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.addtime{
				padding-top: 10px;
				font-size: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				    margin-right: 25px;
			}
			.mui-content>.mui-table-view:first-child{
				margin: 0;
			}
			.mui-content ul{
				height: 10rem;
				border: 1px solid #BCBCBC;
			}
			
			.entry-pro {
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 0 1px 5%;
				
			}
			.entry-message{
				position: absolute;
				    width: 100%;
				    height: 80%;
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 5% 1px 5%;
			}
			.entry-message input{
				height: 30px;
			}
			.entry-message p{
				margin-top: 3%;
				margin-bottom: 1px;
			}
			.entry-message input::-webkit-input-placeholder{			
			font-size:14px;	
			color: #bcbcbc;
			}
			.entry-select{
				position: absolute;
				width: 95%;
				height: 4%;
				border: 1px solid #bcbcbc;
				margin-bottom: 10px;
			}
			.mui-btn-block{
				font-size: 14px;
				margin: 0;
				padding: 0;
				padding-left: 4%;
				line-height: 25px;
				color: #000000;
			}
			.mui-btn-block option:first-child{
				font-size: 14px;
				margin: 0;
				padding: 0;
				color: #bcbcbc;
			}
			    .circle{
			           width: 15px;
			               height: 15px;
			               background-color: #595757;
			               border-radius: 50%;
			               display: inline-block;
			               margin-right: 30px;
			               float: right;
			               text-align: center;
			               line-height: 5px;
						   color:#595757 ;
						   letter-spacing: 0;
			        }
				.circle-active{
					background-color: #e94709;
					color: #e94709;
				}
				.entry-message .phone-code{
					float: right;
					margin-right: 5%;
					background-color:#e94709 ;
					color: #FFFFFF;
					 border-radius: 4px;
					 font-size: 10px;
					 width: 23%;
					 text-align: center;
					}
			
				.mui-btn {
					display: block;
					width: 120px;
					margin: 10px auto;
				}
				
				.preview ul {
				    margin: 0;  
				    padding: 0;  
				}  
				.preview ul li {  
				    position: relative;  
				    display: inline-block;  
				    margin-top: 10px;  
				    margin-bottom: 10px;  
				    margin-right: 10px;  
				    float: left;  
				    list-style: none;  
				}  
				.preview ul li img {  
				        width: 60px;
				        height: 60px;
				    border-radius: 5px;  
				}  
				.preview ul li input {  
				    display: inline-block;  
				    position: absolute;  
				    width: 50px;  
				    height: 50px;  
				    left: 0;  
				    top: 0;  
				    opacity: 0;  
				}  
				.del {  
				    display: inline-block;  
				    position: absolute;  
				    top:6px;  
				    right: 0px;  
				    width: 12px;  
				    height: 2px;  
				    background: #ED544D;  
				    line-height: 0;  
				    font-size: 0;  
				    vertical-align: middle;  
				    -webkit-transform: rotate(45deg);  
				}  
				.del:after {  
				    content: "/";  
				    display: block;  
				    width: 12px;  
				    height: 2px;  
				    background: #ED544D;  
				    -webkit-transform: rotate(-90deg);  
				}  
				
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="images/return.png" ></a>
			<a class="top-logo"><img src="images/logo.png" ></a>
			<h1 class="mui-title">	
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
			  </ul>
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="mui-content">
		
			<div style="font-size: 20px;color: #e94709;margin:3% 0 3% 5%;font-size: 520;" >
				注册摄影师
				<div class="circle circle-active"></div>
				<div class="circle circle-active">........</div>
				<div class="circle circle-active">........</div>
			</div>
			<div class="entry-message">
				<p>相机(机身)型号*:</p>
				<input type="text" name="camera" placeholder="多台设备请用逗号隔开" id="camera" value="" />
			
				<p>镜头型号*:</p>
				<input type="text" name="lens" placeholder="多台设备请用逗号隔开" id="lens" value="" />
				<p>拍摄经历*:</p>
				<input type="text" name="experience" placeholder="请输入拍摄经历" id="experience" value=""/>
				<div style="margin-top: 16px;margin-bottom: 10px;color:#8f8f94 ;">
				    <span class="title">样片上传(可上传多张)*</span>  
				    <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #8f8f94;">0/5</span>  
				</div>  
				<div class="preview" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
				    <ul class="row mui-input-row">  
				        <li>  
				            <input id="file"  type="file" name="upload" accept="image/*"  
				                   onchange="setImagePreviews();"  multiple="true" />  
				            <img src="images/add.png"/>  
				        </li>  
				    </ul>  
				</div>  
			</div>	
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" onclick="submit()>
				<span class="mui-tab-label">提交</span>
			</a>	
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>  
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			$(document).ready(function(){
				});
			function submit(){  
			    var formData = new FormData();  
			    formData.append('name',name);  
			    if(uploadfile.length>0){  
			        for(var i=0;i<uploadfile.length;i++){  
			            formData.append("upload", uploadfile[i]); // 文件对象  
			        }  
			    }  
				var url=11111;
			    jQuery.ajax({  
			      url: url,  
			      type: 'post',  
			      async: false,  
			      contentType:false,  
			      processData: false,  
			      data:formData,  
			      xhrFields: {  
			        withCredentials: true  
			      },  
			      crossDomain: true,  
			      success: function (data) {  
			        console.log(JSON.stringify(data));  
			        mui.toast("提交成功！",{ duration:'500', type:'div' });  
			      },  
			      error: function (error) {  
			        console.log(JSON.stringify(error));  
			        mui.toast('页面出错',{ duration:'500', type:'div' });  
			      }  
			    });  
			}  
			var uploadfile = [];  
			function setImagePreviews() {  
			    var docObj = document.getElementById("file");  
			    var piclength = uploadfile.length;  
			    var fileList = docObj.files;  
			    if((Number(piclength) + Number(fileList.length)) > 5) {  
						mui.alert('最多上传五张');  
			    } else {  
			        document.getElementById("picnum").innerText=Number(piclength) + Number(fileList.length)+'/5';  
			        for(var i = 0; i < fileList.length; i++) {  
			            uploadfile.push(docObj.files[i]);  
			            var picid = Number(piclength) + Number(i);  
			            var reader = new FileReader();  
			            reader.readAsDataURL(docObj.files[i]);                      
			            reader.onload = function(e) {  
			            // 图片base64化  
			            var newUrl = this.result;  
			            $(".preview ul").prepend("<li onclick='delImg(this)'><img src='" + newUrl + "' /><span class='del'></span></li>");  
			            };  
			
			        }  
			    }  
			}  
			function delImg(obj){  
			    var list =document.getElementsByTagName('li');  
			    for(var i=0;i<list.length;i++){  
			        list[i].index=i;  
			    }  
			    var idx=2-obj.index;  
			    var ul=obj.parentNode;  
			    var btnArray=['是','否'];  
				mui.confirm("确定要删除此图?",function(e){  
			        if(e.index==1){  
			            ul.removeChild(obj);  
			            uploadfile.splice(idx,1);  
			            document.getElementById("picnum").innerText=Number(uploadfile.length)+'/5';  
			        }  
			    },{"buttons":btnArray})  
			}  
		</script>
	
	</body>
	
</html>
